<template>
  <div>
    <van-cell-group border>
      <van-field v-model="tel" label="手机号" placeholder="请输入手机号.." autofocus/>
    </van-cell-group>
    <div class="loginBtn">
      <van-button type="danger" round block :disabled="flag" @click="next">下一步</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Dialog } from 'vant';
Vue.use(Dialog);
import { doCheckPhone } from '../../api/user';
export default {
  data () {
    return {
      tel:'',
      // flag:true
    }
  },
  computed:{
    flag(){
      // 满足输入的内容满足手机号的正则规则的
      if(/^1[3456789]\d{9}$/.test(this.tel)){
        return false; //红色的显示可以用
      } else{
        return true;//灰色，禁用
      }
    }
  },
  methods:{
    next(){
      // 验证你的tel是否可以注册
      doCheckPhone({tel:this.tel}).then((res)=>{
        console.log(res.data.code);
        switch (res.data.code) {
          case '10005':
          Dialog.confirm({
              message: '用户名已存在',
            })
              .then(() => {
                // on confirm
                console.log("点了确定");
                this.$router.back();
              })
              .catch(() => {
                // on cancel
              });
            break;
            case '200':
              localStorage.setItem('tel',this.tel)
              this.$router.push("/register/two")
              break
          default:
            break;
        }
      });
    }
  }
}
</script>

<style>
.loginBtn{
  width: 80%;
  margin: 20px auto;
}
</style>